<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>简单的网页布局</title>
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
		<link rel="icon" href="images/favicon.png">
	</head>
	<body>
		<!--header-->
		<header>
			<div class="container">
				<!--logo-->
			<h1><a><img src="images/logo.png"/></a></h1>
			<!--导航-->
			<nav>
				<a class="active" href="#">Home</a>
				<a href="#">Course</a>
				<a href="#">Actual</a>
				<a href="#">Play</a>
				<a href="#">FAQ</a>
				<a href="#">Notes</a>
			</nav>
			</div>
		</header>
		<!--广告-->
		<section class="banner">
			<ul>
				<li class="active"><img src="images/banner/banner1.jpg"></img></li>
				<li class="left"><img src="images/banner/banner3.jpg"></img></li>
				<li class="right"><img src="images/banner/banner2.jpg"></img></li>
			</ul>
		</section>
		<section class="main">
			<aside>
				<h1>Recent <strong>Course</strong></h1>
				<dl>
					<dt>Hyper Text Markup Language</dt>
					<dd><img src="images/Course/05_05.png"/></dd>
					<dd>HTML is the standard markup language used to create web pages and its elements form the building blocks of all websites.</dd>
				</dl>
				<dl>
					<dt>Cascading Style Sheets</dt>
					<dd><img src="images/Course/06_04.png"/></dd>
					<dd>Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents.</dd>
				</dl>
				<dl>
					<dt>JavaScript</dt>
					<dd><img src="images/Course/09_07.png"/></dd>
					<dd>JavaScript is a high-level, dynamic, untyped, and interpreted programming language.</dd>
				</dl>
				<dl>
					<dt>AngularJS</dt>
					<dd><img src="images/Course/02_09.png"/></dd>
					<dd>AngularJS is an open-source web application framework mainly maintained by Google and by a community of individuals and</dd>
				</dl>
			</aside>
			<article>
				<h1>Welcome to <strong>Massive Open Online Course!</strong></h1>
				<p>We provide the latest knowledge to help you cope with the changing world!</p>
				<img src="images/article.jpg"/>
				<p>We hope that all the students who love the Internet can be more convenient access to learning resources, using the Internet thinking to change our learning.</p>
				<p>Focus on IT skills education MOOC, consistent with the development trend of the Internet down to earth's MOOC. We are free, we only teach useful, we concentrate on education.</p>
			</article>
		</section>
		<!--footer-->
		<footer>
			<div class="container">
				<h3>Copyright © 2016 imooc.com All Rights Reserved.</h3>
			<p>
				<a href=""><img src="images/icon/weichat.png"/></a>
				<a href=""><img src="images/icon/sina.png"/></a>
				<a href=""><img src="images/icon/qq.png"/></a>
			</p>
			</div>
		</footer>
	</body>
</html>
